<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Design</title>
    <link rel="stylesheet" type="text/css" href="sass/main.css">
    <link rel = "Shortcut Icon" href=favicon.ico type="image/x-icon">
</head>
<body>
<section class="hero">
    <header>
        <img id="logo" src="images/logo.png" alt="logo" >
        <ul>
            <li>Agents</li>
            <li>Login</li>
            <li>Signup</li>
        </ul>
    </header>

    <script type="text/javascript">
        var img = document.getElementById("logo");
        img.onclick = function () {
            window.open("http://git.oschina.net/geguol.cc/SassDemo");
        }
    </script>

    <h1>Relax,Find An Agent Just Got Easier</h1>
    <h2>Receive proposals from best agents for free</h2>
    <form action="">
        <input type="text" placeholder="Enter a suburb">
        <input type="button" value="search">
    </form>
</section>
<!--数字区域-->
<section class="numbers">
    <ul>
        <li>
            <h2>20,000</h2>
            <h3>Agents</h3>
        </li>
        <li>
            <h2>1,723,000</h2>
            <h3>Transactions</h3>
        </li>
        <li>
            <h2>17,444</h2>
            <h3>Agencies</h3>
        </li>
        <li>
            <h2>10,200</h2>
            <h3>Suburbs</h3>
        </li>
    </ul>
</section>
<!--how-it-works-->
<section class="how-it-works">
    <h2>How it works</h2>
    <ul>
        <li>
            <div class="detail">
                <span class="number">1</span>
                <i class="icon-list"></i>
                <h3>Compare</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad asperiores eos explicabo iure natus nisi nobis veritatis voluptas! Ad et maxime nisi porro praesentium quia repudiandae, rerum sequi suscipit vel!</p>
            </div>
        </li>
        <li>
            <div class="detail">
                <span class="number">2</span>
                <i class="icon-pencil"></i>
                <h3>Receive Proposals</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda cupiditate dicta est expedita impedit ipsum nemo nihil obcaecati optio possimus quis ratione, repellat repudiandae soluta suscipit temporibus tenetur? Ad, expedita?</p>
            </div>
        </li>
        <li>
            <div class="detail">
                <span class="number">3</span>
                <i class="icon-users"></i>
                <h3>Sell with the Best</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, iste quos? Asperiores dolorem doloribus facere illum neque quia recusandae suscipit unde. Aliquid atque beatae fugiat libero placeat porro ratione temporibus?</p>
            </div>
        </li>
    </ul>
</section>

</body>
</html>